<template>
  <div class="app-container">
    <el-form
      :model="tableData.queryParams"
      ref="queryForm"
      :inline="true"
      label-width="100x"
    >
      <el-form-item label="计划月份" prop="planMonth">
        <el-date-picker
          type="month"
          v-model="tableData.queryParams.planMonth"
          value-format="yyyy-MM"
          placeholder="请选择计划月份"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>

      <el-form-item label="产品信息" label-width="80px" prop="productName">
        <el-input
          v-model="tableData.queryParams.productName"
          clearable
          size="small"
          placeholder="请输产品信息"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="getList"
          >搜索</el-button
        >
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="24" style="text-align: right">
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="tableDataBom.open = true"
          v-hasPermi="['produce:planMonth:search']"
        >
          系列BOM查询
        </el-button>
        <el-button
          type="primary"
          icon="el-icon-upload2"
          size="mini"
          @click="handleImport(1)"
          v-hasPermi="['produce:planMonth:import']"
        >
          导入系列BOM
        </el-button>
        <el-button
          type="primary"
          icon="el-icon-upload2"
          size="mini"
          @click="handleImport(2)"
          v-hasPermi="['produce:planMonth:import']"
        >
          导入月度计划
        </el-button>
        <el-button
          type="primary"
          icon="el-icon-upload2"
          size="mini"
          @click="handleImport(3)"
          v-hasPermi="['produce:planMonth:import']"
        >
          导入物料比例
        </el-button>
        <el-button
          type="success"
          icon="el-icon-edit"
          size="mini"
          @click="handleUpdateT3()"
          v-hasPermi="['produce:planMonth:update']"
        >
          更新T+3计划
        </el-button>
        <el-button
          type="success"
          icon="el-icon-edit"
          size="mini"
          @click="handleOpenwalk(1)"
          v-hasPermi="['produce:planMonth:procure']"
        >
          预排采购
        </el-button>
        <el-button
          type="success"
          icon="el-icon-edit"
          size="mini"
          @click="handleOpenwalk(2)"
          v-hasPermi="['produce:planMonth:produce']"
        >
          预排生产
        </el-button>
        <el-button
          type="success"
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          v-hasPermi="['produce:planMonth:export']"
          >导出</el-button
        >
        <el-button
          type="success"
          icon="el-icon-download"
          size="mini"
          @click="handleExportProcure"
          v-hasPermi="['produce:planMonth:exportProcure']"
        >
          导出采购需求
        </el-button>
      </el-col>
    </el-row>
    <ux-grid
      :treeConfig="{
        children: 'childList',
        expandAll: true,
        indent: 5,
      }"
      :pagination-show="true"
      :total="tableData.total"
      :page-size.sync="tableData.queryParams.pageSize"
      :current-page.sync="tableData.queryParams.pageNum"
      @handlePageSize="handlePageSize"
      :default-expand-all="true"
      ref="plxTableProcess"
      show-body-overflow="title"
      show-header-overflow="title"
      :height="tableH"
      widthResize
      :edit-config="{
        trigger: 'click',
        mode: 'cell',
        activeMethod: ({ row, rowIndex, column, columnIndex }) => {
          return (
            row.productType == '成品' &&
            (tableData.queryParams.planMonth > $moment().format('YYYY-MM') ||
              (tableData.queryParams.planMonth == $moment().format('YYYY-MM') &&
                columnIndex >= $moment().date() + 6))
          );
        },
      }"
      border
      :data="tableData.rows"
      :header-cell-style="{ 'text-align': 'center' }"
    >
      <!-- <ux-table-column title="#" align="center" type="index" width="40"></ux-table-column> -->
      <ux-table-column
        title="类型"
        align="center"
        field="productType"
        width="120px"
        :tree-node="true"
        fixed="left"
      ></ux-table-column>
      <ux-table-column
        title="物料代码"
        align="center"
        field="productCode"
        width="160px"
        fixed="left"
      ></ux-table-column>
      <ux-table-column
        title="客户代码"
        align="center"
        field="customerCode"
        width="160px"
        fixed="left"
      ></ux-table-column>
      <ux-table-column
        title="物料名称"
        align="center"
        field="productName"
        width="180px"
        fixed="left"
      ></ux-table-column>
      <ux-table-column
        title="计划总数"
        align="center"
        field="planNumberTotal"
        width="90px"
      ></ux-table-column>
      <ux-table-column
        v-for="i in $moment(tableData.queryParams.planMonth).daysInMonth()"
        :key="i"
        :title="i + '日'"
        align="center"
        :field="'planNumber' + i"
        width="90px"
        :edit-render="editRender"
      >
        <template v-slot:edit="{ row }">
          <el-input-number
            style="width: 100%"
            :min="0"
            :controls="false"
            v-model="row[`planNumber${i}`]"
            @change="save(row)"
          ></el-input-number>
        </template>
        <template v-slot="{ row }">
          <span
            :class="{
              'my-input-sc':
                row.productType == '成品' &&
                (tableData.queryParams.planMonth >
                  $moment().format('YYYY-MM') ||
                  (tableData.queryParams.planMonth ==
                    $moment().format('YYYY-MM') &&
                    i >= $moment().date() + 2)),
            }"
          >
            {{ row[`planNumber${i}`] }}
          </span>
        </template>
      </ux-table-column>
      <ux-table-column
        title="所占比例"
        align="center"
        field="updateRate"
        width="90px"
      ></ux-table-column>
      <ux-table-column
        title="MS欠数"
        align="center"
        field="unCompleteNumber"
        width="90px"
      ></ux-table-column>
      <ux-table-column
        title="系统出单"
        align="center"
        field="systemOrder"
        width="90px"
      ></ux-table-column>
      <ux-table-column
        title="发货合计"
        align="center"
        field="deliveryTotal"
        width="90px"
      ></ux-table-column>
      <ux-table-column
        title="库存数量"
        align="center"
        field="inventoryNumber"
        width="90px"
      ></ux-table-column>
      <ux-table-column
        title="生产车间"
        align="center"
        field="workShop"
        width="90px"
      >
        <template #default="scope">
          <dict-tag :options="itCarOptions" :value="scope.row.workShop" />
        </template>
      </ux-table-column>
    </ux-grid>
    <el-dialog
      :title="upload.title"
      v-model="upload.open"
      :close-on-click-modal="false"
      width="500px"
      draggable
      append-to-body
    >
      <el-form
        ref="uploadForm"
        :model="upload.form"
        :rules="upload.rules"
        label-width="80px"
      >
        <el-form-item label="月份" prop="planMonth" v-if="flag == 2">
          <el-date-picker
            type="month"
            v-model="upload.data.planMonth"
            value-format="yyyy-MM"
            placeholder="请选择计划月份"
            clearable
            size="small"
          />
        </el-form-item>
        <el-form-item label="导入文件" prop="planMonth">
          <el-upload
            ref="upload"
            :limit="1"
            accept=".xlsx, .xls"
            :headers="upload.headers"
            :action="upload.url"
            :disabled="upload.isUploading"
            :data="upload.data"
            :on-progress="handleFileUploadProgress"
            :on-success="handleFileSuccess"
            :on-error="handleFileError"
            :auto-upload="false"
            drag
          >
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">
              将文件拖到此处，或
              <em>点击上传</em>
            </div>
            <div class="el-upload__tip text-center" slot="tip">
              <span>仅允许导入xls、xlsx格式文件。</span>
              <el-link
                type="primary"
                :underline="false"
                style="font-size: 12px; vertical-align: baseline"
                @click="importTemplate"
                >下载模板</el-link
              >
            </div>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="upload.open = false">取 消</el-button>
        <el-button type="primary" @click="submitFileForm">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog
      title="系列BOM查询"
      v-model="tableDataBom.open"
      :close-on-click-modal="false"
      width="1000px"
      draggable
      append-to-body
    >
      <el-form
        :model="tableDataBom.queryParams"
        ref="queryForm"
        :inline="true"
        label-width="100x"
      >
        <el-form-item
          label="系列编码"
          label-width="80px"
          prop="parentCustomerCode"
        >
          <el-input
            v-model="tableDataBom.queryParams.parentCustomerCode"
            clearable
            size="small"
            placeholder="系列编码"
          />
        </el-form-item>

        <el-form-item label="物料编码" label-width="80px" prop="customerCode">
          <el-input
            v-model="tableDataBom.queryParams.customerCode"
            clearable
            size="small"
            placeholder="物料编码"
          />
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-search"
            size="mini"
            @click="handleQueryBom"
            >搜索</el-button
          >
        </el-form-item>
      </el-form>

      <el-table
        v-loading="tableDataBom.loading"
        :data="tableDataBom.rows"
        border
        height="500"
      >
        <el-table-column type="index" width="55" align="center" />
        <el-table-column
          label="系列编码"
          align="center"
          prop="parentCustomerCode"
          width="120"
        />
        <el-table-column
          label="系列名称"
          align="center"
          prop="parentCustomerProductName"
        />
        <el-table-column
          label="物料编码"
          align="center"
          prop="customerCode"
          width="120"
        />
        <el-table-column
          label="物料名称"
          align="center"
          prop="customerProductName"
        />
        <el-table-column
          label="用量"
          align="center"
          prop="unitUsage"
          width="80"
        />
      </el-table>
    </el-dialog>
    <el-dialog
      :title="walkthroughs.title"
      v-model="walkthroughs.open"
      width="450px"
      :close-on-click-modal="false"
      draggable
      append-to-body
    >
      <el-form
        ref="walkthroughsForm"
        :model="walkthroughs.form"
        :rules="walkthroughs.rules"
        label-width="80px"
      >
        <el-form-item
          v-if="walkthroughs.flag == 1"
          label="预排时间"
          prop="planMonth"
        >
          <el-date-picker
            :append-to-body="false"
            v-model="walkthroughs.form.planMonth"
            type="month"
            placeholder="选择月"
            value-format="yyyy-MM"
            style="width: 100%"
          />
        </el-form-item>
        <el-form-item v-else label="预排时间" prop="params">
          <hd-date-picker
            keyName="productionTime"
            v-model="walkthroughs.form.params"
            :pickerOptions="pickerOptions"
          ></hd-date-picker>
        </el-form-item>
      </el-form>
      <div class="dialog-footer">
        <el-button type="info" @click="walkthroughs.open = false"
          >取 消</el-button
        >
        <el-button type="primary" @click="submitWalkthroughs">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog
      :title="upload2.title"
      v-model="upload2.open"
      width="650px"
      :close-on-click-modal="false"
      draggable
      append-to-body
    >
      <el-form
        ref="t3DataForm"
        :model="upload2.data"
        :rules="upload2.rules"
        label-width="80px"
      >
        <el-form-item label="更新时间" prop="updateTime">
          <hd-date-picker
            keyName="updateTime"
            v-model="params"
            :pickerOptions="pickerOptions"
          ></hd-date-picker>
        </el-form-item>
        <el-form-item label="排产时间" prop="ProductionTime">
          <hd-date-picker
            keyName="ProductionTime"
            v-model="params"
            :pickerOptions="pickerOptions"
          ></hd-date-picker>
        </el-form-item>
        <el-form-item label="导入文件" prop="file">
          <el-upload
            ref="upload2"
            :limit="1"
            accept=".xlsx, .xls"
            :headers="upload2.headers"
            :action="upload2.url"
            :disabled="upload2.isUploading"
            :data="upload2.data"
            :on-progress="handleFileUploadProgress"
            :on-success="handleFileSuccess2"
            :auto-upload="false"
            drag
          >
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">
              将文件拖到此处，或
              <em>点击上传</em>
            </div>
            <div class="el-upload__tip text-center" slot="tip">
              <span>仅允许导入xls、xlsx格式文件。</span>
              <el-link
                type="primary"
                :underline="false"
                style="font-size: 12px; vertical-align: baseline"
                @click="importTemplate"
                >下载模板</el-link
              >
            </div>
          </el-upload>
        </el-form-item>
        <el-form-item label="导入类型" prop="type">
          <el-radio-group v-model="upload2.data.type">
            <el-radio label="A">按系列编码导入</el-radio>
            <el-radio label="B">按物料编码导入</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="自动排产" prop="autoProduction">
          <el-radio-group v-model="upload2.data.autoProduction">
            <el-radio :label="true">是</el-radio>
            <el-radio :label="false">否</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="upload2.open = false">取 消</el-button>
        <el-button type="primary" @click="submitT3Form">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog
      title="数据上传中,请勿进行其他操作!"
      class="progress-dialog"
      v-model="progressOpen"
      width="25%"
    >
      <div style="height: 100px">
        总进度:
        <el-progress
          :percentage="parseInt(progressPercent.progress * 100)"
        ></el-progress>
      </div>
    </el-dialog>
    <el-dialog
      title="导出采购需求"
      v-model="exportForm.open"
      :close-on-click-modal="false"
      draggable
      width="450px"
    >
      <el-form
        ref="exportForm"
        :model="exportForm.form"
        :rules="exportForm.exportRules"
        label-width="100px"
      >
        <el-form-item label="预排时间" prop="params">
          <hd-date-picker
            keyName="PlanTime"
            v-model="exportForm.form.params"
            :pickerOptions="pickerOptionsMonth"
          ></hd-date-picker>
        </el-form-item>
      </el-form>
      <div class="dialog-footer">
        <el-button type="info" @click="exportForm.open = false"
          >取 消</el-button
        >
        <el-button type="primary" @click="submitExportForm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import debounce from "lodash/debounce";
import PlanService from "@/api/produce/customer";
import FakeProgress from "fake-progress";
import { getToken } from "@/utils/auth";
export default {
  name: "PlanMonth",
  data() {
    return {
      progressOpen: false,
      // 遮罩层
      loading: true,
      // 导出遮罩层
      exportLoading: false,
      // 选中数组
      ids: [],
      // 总条数
      total: 0,
      // 工单表格数据
      moeDetList: [],
      tableH: document.body.clientHeight - 230,
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      readOnly: false,
      //移动工单弹出层
      mobileOpen: false,
      tableData: {
        height: 0,
        rows: [],
        loading: false,
        total: 0,
        open: false,
        form: {},
        selection: [],
        rules: {},
        queryParams: {
          pageNum: 1,
          pageSize: 20,
          planMonth: this.$moment().format("YYYY-MM"),
          productName: null,
        },
      },
      tableDataBom: {
        height: 0,
        rows: [],
        loading: false,
        total: 0,
        open: false,
        form: {},
        selection: [],
        rules: {},
        queryParams: {
          pageNum: 1,
          pageSize: 20,
        },
      },
      walkthroughs: {
        title: "预排采购",
        open: false,
        flag: null,
        form: {
          planMonth: this.$moment().format("YYYY-MM"),
        },
        rules: {
          planMonth: [
            { required: true, message: "请选择预排时间", trigger: "change" },
          ],
          params: [
            { required: true, message: "请选择预排时间", trigger: "change" },
            {
              validator: (rule, value, callback) => {
                if (value.beginProductionTime && value.endProductionTime) {
                  callback();
                } else {
                  callback(new Error("请选择预排时间"));
                }
              },
              trigger: "change",
            },
          ],
        },
      },
      exportForm: {
        open: false,
        form: {
          params: {},
        },
        exportRules: {
          params: [
            { required: true, message: "请选择预排时间", trigger: "change" },
            {
              validator: (rule, value, callback) => {
                if (value.beginPlanTime && value.endPlanTime) {
                  callback();
                } else {
                  callback(new Error("请选择预排时间"));
                }
              },
              trigger: "change",
            },
          ],
        },
      },
      pickerOptions: {
        disabledDate: (time) => {
          var day1 = this.$moment().add(1, "days").toDate();
          var day2 = this.$moment(this.tableData.queryParams.planMonth)
            .endOf("month")
            .toDate();
          return (
            this.$moment(time).isBefore(day1) ||
            this.$moment(time).isAfter(day2)
          );
        },
      },
      pickerOptionsMonth: {
        disabledDate: (time) => {
          var day1 = this.$moment().startOf("month").toDate();
          var day2 = this.$moment().endOf("month").toDate();
          return (
            this.$moment(time).isBefore(day1) ||
            this.$moment(time).isAfter(day2)
          );
        },
      },
      params: {},
      upload: {
        data: {
          planMonth: this.$moment().format("YYYY-MM"),
          isExist: false,
        },
        // 是否显示弹出层（用户导入）
        open: false,
        // 弹出层标题（用户导入）
        title: "",
        // 是否禁用上传
        isUploading: false,
        // 设置上传的请求头部
        headers: { Authorization: "Bearer " + getToken() },
        // 上传的地址
        url: "",
      },
      upload2: {
        data: {
          type: "A",
          autoProduction: false,
        },
        // 是否显示弹出层（用户导入）
        open: false,
        // 弹出层标题（用户导入）
        title: "更新T+3计划",
        // 是否禁用上传
        isUploading: false,
        // 设置上传的请求头部
        headers: { Authorization: "Bearer " + getToken() },
        // 上传的地址
        url: process.env.VUE_APP_BASE_API + "/customer/monthPlan/importT3Plan",
        rules: {
          type: [
            { required: true, message: "请选择导入类型", trigger: "change" },
          ],
          autoProduction: [
            { required: true, message: "请选择预排时间", trigger: "change" },
          ],
        },
      },
      progressPercent: new FakeProgress({ timeConstant: 3000 }),
      flag: null,
      // 表单参数
      form: {},
      editRender: { autofocus: ".el-input__inner" },
      //制造车间字典
      itCarOptions: [],
    };
  },
  created() {
    this.getList();
    //制造车间字典
    this.getDicts("Manufacturing_plant").then((response) => {
      this.itCarOptions = response.data;
    });
  },
  methods: {
    /** 查询工单列表 */
    getList() {
      this.loading = true;
      this.tableData.queryParams.pageNum = 1;
      PlanService.monthPlanlist(this.tableData.queryParams).then((response) => {
        this.tableData.rows = response.rows;
        this.tableData.total = response.total;
        this.tableData.loading = false;
      });
    },
    handleUpdateT3() {
      this.upload2.open = true;
      this.flag = 2;
    },
    save(row) {
      PlanService.save(row);
    },
    submitT3Form() {
      this.opens();
      this.upload2.data.params = JSON.stringify(this.params);
      this.$refs.upload2.submit();
      //使用定时器来制作进度条
    },
    handleImport(val) {
      this.flag = val;
      if (val == 1) {
        this.upload.title = "导入系列BOM";
        this.upload.url = process.env.VUE_APP_BASE_API + "/customer/bom/import";
      } else if (val == 2) {
        this.upload.title = "导入月度计划";
        this.upload.url =
          process.env.VUE_APP_BASE_API + "/customer/monthPlan/import";
      } else {
        this.upload.title = "导入物料比例";
        this.upload.url =
          process.env.VUE_APP_BASE_API + "/customer/monthPlan/importPlanRate";
      }
      this.upload.open = true;
    },
    // 文件上传中处理
    handleFileUploadProgress(event, file, fileList) {
      this.upload.isUploading = true;
      this.upload2.isUploading = true;
    },
    // 文件上传成功处理
    handleFileSuccess(response, file, fileList) {
      this.closes();
      this.upload.open = false;
      this.upload.isUploading = false;
      if (response.data) {
        this.download(response.data.msg);
      }
      if (response.code == 415) {
        this.$confirm("导入结果：" + response.msg, "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(() => {
          //使用定时器来制作进度条
          this.opens();
          let formData = new FormData();
          formData.append("file", file.raw);
          formData.append("planMonth", this.upload.data.planMonth);
          formData.append("isExist", true);
          PlanService.monthPlanImport(formData)
            .then((res) => {
              this.closes();
              this.msgSuccess(res.msg);
            })
            .catch((err) => {
              this.closes();
              this.msgError(err.msg);
            });
        });
      } else {
        this.$alert(response.msg, "导入结果", {
          dangerouslyUseHTMLString: true,
        });
      }
      this.$refs.upload.clearFiles();
      this.getList();
    },
    handleFileError(response, file, fileList) {
      this.closes();
    },
    handleFileSuccess2(response, file, fileList) {
      this.upload2.isUploading = false;
      this.closes();
      if (response.data) {
        this.download(response.data.msg);
      }
      this.$alert(response.msg, "导入结果", { dangerouslyUseHTMLString: true });
      this.$nextTick(() => {
        setTimeout(() => {
          //关闭遮罩，进度条归零
          this.$refs.upload2.clearFiles();
          this.upload2.open = false;
          this.upload2.isUploading = false;
          this.getList();
        }, 1500);
      });
    },
    submitFileForm() {
      //使用定时器来制作进度条
      this.progressOpen = true;
      this.progressPercent = new FakeProgress({ timeConstant: 3000 });
      this.progressPercent.start();
      this.$refs.upload.submit();
    },
    /** 导出按钮操作 */
    handleExport() {
      const queryParams = this.tableData.queryParams;
      this.$confirm("是否确认导出所有数据项?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.exportLoading = true;
          return PlanService.monthPlanExport(queryParams);
        })
        .then((response) => {
          this.download(response.msg);
          this.exportLoading = false;
        })
        .catch(() => {});
    },
    handleQueryBom() {
      PlanService.list(this.tableDataBom.queryParams).then((response) => {
        this.tableDataBom.rows = response.rows;
      });
    },
    loadBom: debounce(function () {
      if (
        this.tableDataBom.queryParams.pageNum <
        Math.ceil(this.total / this.tableDataBom.queryParams.pageSize)
      ) {
        this.queryParams.pageNum++;
        PlanService.list(this.tableDataBom.queryParams).then((response) => {
          this.tableDataBom.rows = this.tableDataBom.rows.concat(response.rows);
          this.tableDataBom.total = response.total;
          this.tableDataBom.loading = false;
        });
      }
    }, 500),
    handlePageSize(params) {
      this.tableData.queryParams.pageNum = params.page;
      this.tableData.queryParams.pageSize = params.size;
      this.tableData.queryParams.queryStr = this.queryStr;
      PlanService.monthPlanlist(this.tableData.queryParams).then((response) => {
        this.tableData.rows = response.rows;
        this.tableData.total = response.total;
        this.tableData.loading = false;
        this.tableData.form = {};
      });
    },
    handleSelectionChange() {},
    /** 下载模板操作 */
    importTemplate() {
      if (this.flag == 1) {
        PlanService.exportTemplate().then((response) => {
          this.download(response.msg);
        });
      } else if (this.flag == 2) {
        PlanService.monthPlanExportTemplate().then((response) => {
          this.download(response.msg);
        });
      } else {
        PlanService.exportPlanRate().then((response) => {
          this.download(response.msg);
        });
      }
    },
    handleOpenwalk(val) {
      if (val == 1) {
        this.walkthroughs.title = "预排采购";
      } else {
        this.walkthroughs.title = "预排生产";
      }
      this.walkthroughs.open = true;
      this.walkthroughs.flag = val;
    },
    submitWalkthroughs() {
      this.$refs["walkthroughsForm"].validate((valid) => {
        if (valid) {
          this.walkthroughs.form.productName =
            this.tableData.queryParams.productName;
          //使用定时器来制作进度条
          this.opens();

          if (this.walkthroughs.flag == 1) {
            PlanService.monthPlanPrePurchase(this.walkthroughs.form)
              .then((response) => {
                this.$message.success("预排采购成功");
              })
              .finally(() => {
                this.closes();
                this.getList();
              });
          } else {
            PlanService.monthPlanPrePlan(this.walkthroughs.form)
              .then((response) => {
                this.$message.success("预排生产成功");
              })
              .finally(() => {
                this.closes();
                this.getList();
              });
          }
          this.walkthroughs.open = false;
        }
      });
    },
    handleExportProcure() {
      this.exportForm.open = true;
    },
    submitExportForm() {
      this.$refs["exportForm"].validate((valid) => {
        if (valid) {
          this.opens();
          PlanService.exportPurChasing(this.exportForm.form).then((res) => {
            this.download(res.msg);
            this.closes();
            this.$message.success("导出成功");
          });
          this.exportForm.open = false;
        }
      });
    },
    closes() {
      this.progressPercent.end();
      this.progressOpen = false;
      this.progressPercent = { progress: 1 };
      // this.loading1.close()
    },
    opens() {
      // this.loading1 = this.$loading({
      //   lock: true,
      //   text: '数据处理中,请耐心等待!',
      //   spinner: 'el-icon-loading',
      //   background: 'rgba(0, 0, 0, 0.7)',
      // })
      //使用定时器来制作进度条

      setTimeout(() => {
        this.progressOpen = true;
      }, 200);
      this.progressPercent = new FakeProgress({ timeConstant: 3000 });
      this.progressPercent.start();
    },
  },
};
</script>

<style lang="scss" scoped>
.progress-dialog {
  margin-top: 20vh !important;
}
</style>
